<template>
  <el-container class="template-layout">
    <el-main>
      <el-tabs
        v-model="activeName"
        style="height: 100%"
        @tab-click="handleClick"
      >
        <el-tab-pane
          :label="$t('language.ch') + '(zh-CN)'"
          name="zh-CN"
          style="height: 100%"
        >
          <!-- <span>{{ $t("test1.k1") }}</span> -->
          <el-header v-if="showSearchHeader">
            <zz-Search
              :searchOptions="searchOptions"
              @getSearchData="getSearchData"
              @resetFields="resetFields"
            ></zz-Search>
          </el-header>
          <zz-PageBar style="margin-top: 12px">
            <template #buttons>
              <el-button type="primary" @click="addDict">{{
                t("common.add")
              }}</el-button>
              <el-button @click="syncCache">{{
                t("function.syncCache")
              }}</el-button>
            </template>
            <template #right>
              <el-dropdown @command="handleSizeChange">
                <el-button :icon="'Switch'" circle />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="mini">{{
                      $t("table.mini")
                    }}</el-dropdown-item>
                    <el-dropdown-item command="small">{{
                      $t("table.small")
                    }}</el-dropdown-item>
                    <el-dropdown-item command="medium">{{
                      $t("table.medium")
                    }}</el-dropdown-item>
                    <el-dropdown-item command="large">{{
                      $t("table.large")
                    }}</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-button
                :icon="'Search'"
                circle
                @click="showSearchHeader = !showSearchHeader"
              />
              <el-button
                :icon="'Operation'"
                circle
                @click="showColumnSetting = true"
              />
            </template>
          </zz-PageBar>
          <zz-Table
            :key="tableKey"
            :data="tableData"
            :page="tablePage"
            :hasPage="true"
            :size="tabelSize"
            :style="tableStyle"
            :loading="loading"
            @pageChange="handlePageChange"
          >
            <vxe-column type="seq" width="70"></vxe-column>
            <!-- 动态生成列，根据tableColumns的顺序 -->
            <template v-for="column in tableColumns" :key="column.field">
              <vxe-column
                v-if="column.visible"
                :field="column.field"
                :title="column.title"
                :fixed="column.fixed"
              >
                <template #default="{ row }">
                  <div v-if="editingRow === row">
                    <!-- 根据字段类型渲染不同的编辑组件 -->
                    <el-switch
                      v-if="column.field === 'status'"
                      v-model="row[column.field]"
                      active-value="1"
                      inactive-value="0"
                    ></el-switch>
                    <el-input
                      v-else
                      v-model="row[column.field]"
                      size="small"
                    ></el-input>
                  </div>
                  <div v-else>
                    <!-- 根据字段类型渲染不同的显示内容 -->
                    <template v-if="column.field === 'status'">
                      {{
                        row[column.field] === "1"
                          ? t("common.enable")
                          : t("common.disable")
                      }}
                    </template>
                    <template v-else>
                      {{ row[column.field] }}
                    </template>
                  </div>
                </template>
              </vxe-column>
            </template>
            <vxe-column
              :title="$t('common.operation')"
              :min-width="100"
              fixed="right"
              align="center"
            >
              <template v-slot="{ row }">
                <!-- 编辑状态下显示确认和取消按钮 -->
                <template v-if="editingRow === row">
                  <zz-TableBtn
                    type="success"
                    :loading="btnLoading"
                    @click="confirmEdit"
                    >{{ t("common.confirm") }}</zz-TableBtn
                  >
                  <zz-TableBtn
                    type="info"
                    :loading="btnLoading"
                    @click="cancelEdit"
                    >{{ t("common.cancel") }}</zz-TableBtn
                  >
                </template>
                <!-- 非编辑状态下显示编辑和删除按钮 -->
                <template v-else>
                  <zz-TableBtn
                    type="text"
                    :loading="btnLoading"
                    @click="quickAddOtherLanguage(row)"
                  >
                    <el-icon><Switch /></el-icon>
                  </zz-TableBtn>
                  <zz-TableBtn
                    type="text"
                    :loading="btnLoading"
                    @click="setDict(row)"
                    >{{ t("common.edit") }}</zz-TableBtn
                  >
                  <zz-TableBtn
                    type="error"
                    :loading="btnLoading"
                    @click="deleteDict(row)"
                    >{{ t("common.delete") }}</zz-TableBtn
                  >
                </template>
              </template>
            </vxe-column>
          </zz-Table>
        </el-tab-pane>
        <el-tab-pane
          :label="$t('language.en') + '(en-US)'"
          name="en-US"
          style="height: 100%"
        >
          <el-header v-if="showSearchHeader">
            <zz-Search
              :searchOptions="searchOptions_b"
              @getSearchData="getSearchData_b"
              @resetFields="resetFields_b"
            ></zz-Search>
          </el-header>
          <zz-PageBar style="margin-top: 12px">
            <template #buttons>
              <el-button type="primary" @click="addDict">{{
                t("common.add")
              }}</el-button>
              <el-button @click="syncCache">{{
                t("function.syncCache")
              }}</el-button>
            </template>
            <template #right>
              <el-dropdown @command="handleSizeChange">
                <el-button :icon="'Switch'" circle />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="mini">{{
                      $t("table.mini")
                    }}</el-dropdown-item>
                    <el-dropdown-item command="small">{{
                      $t("table.small")
                    }}</el-dropdown-item>
                    <el-dropdown-item command="medium">{{
                      $t("table.medium")
                    }}</el-dropdown-item>
                    <el-dropdown-item command="large">{{
                      $t("table.large")
                    }}</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-button
                :icon="'Search'"
                circle
                @click="showSearchHeader = !showSearchHeader"
              />
              <el-button
                :icon="'Operation'"
                circle
                @click="showColumnSetting_en = true"
              />
            </template>
          </zz-PageBar>
          <zz-Table
            :key="tableKey"
            :data="tableData"
            :page="tablePage"
            :hasPage="true"
            :size="tabelSize"
            :style="tableStyle"
            :loading="loading"
            @pageChange="handlePageChange"
          >
            <vxe-column type="seq" width="70"></vxe-column>
            <!-- 动态生成列，根据tableColumns的顺序 -->
            <template v-for="column in tableColumns_en" :key="column.field">
              <vxe-column
                v-if="column.visible"
                :field="column.field"
                :title="column.title"
                :fixed="column.fixed"
              >
                <template #default="{ row }">
                  <div v-if="editingRow === row">
                    <!-- 根据字段类型渲染不同的编辑组件 -->
                    <el-switch
                      v-if="column.field === 'status'"
                      v-model="row[column.field]"
                      active-value="1"
                      inactive-value="0"
                    ></el-switch>
                    <el-input
                      v-else
                      v-model="row[column.field]"
                      size="small"
                    ></el-input>
                  </div>
                  <div v-else>
                    <!-- 根据字段类型渲染不同的显示内容 -->
                    <template v-if="column.field === 'status'">
                      {{
                        row[column.field] === "1"
                          ? t("common.enable")
                          : t("common.disable")
                      }}
                    </template>
                    <template v-else>
                      {{ row[column.field] }}
                    </template>
                  </div>
                </template>
              </vxe-column>
            </template>
            <vxe-column
              :title="$t('common.operation')"
              :min-width="100"
              fixed="right"
              align="center"
            >
              <template v-slot="{ row }">
                <!-- 编辑状态下显示确认和取消按钮 -->
                <template v-if="editingRow === row">
                  <zz-TableBtn
                    type="success"
                    :loading="btnLoading"
                    @click="confirmEdit"
                    >{{ t("common.confirm") }}</zz-TableBtn
                  >
                  <zz-TableBtn
                    type="info"
                    :loading="btnLoading"
                    @click="cancelEdit"
                    >{{ t("common.cancel") }}</zz-TableBtn
                  >
                </template>
                <!-- 非编辑状态下显示编辑和删除按钮 -->
                <template v-else>
                  <zz-TableBtn
                    type="text"
                    :loading="btnLoading"
                    @click="quickAddOtherLanguage(row)"
                  >
                    <el-icon><Switch /></el-icon>
                  </zz-TableBtn>
                  <zz-TableBtn
                    type="text"
                    :loading="btnLoading"
                    @click="setDict(row)"
                    >{{ t("common.edit") }}</zz-TableBtn
                  >
                  <zz-TableBtn
                    type="error"
                    :loading="btnLoading"
                    @click="deleteDict(row)"
                    >{{ t("common.delete") }}</zz-TableBtn
                  >
                </template>
              </template>
            </vxe-column>
          </zz-Table>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
  <add
    ref="addRef"
    v-model="addIsOpen"
    :singleMode="singleMode"
    @success="handleSuccess"
  ></add>

  <!-- 中文标签页列设置 -->
  <zzColumnSetting
    v-model="showColumnSetting"
    :columns="tableColumns"
    :default-columns="defaultTableColumns"
    storage-key="internationalSetting_columns_zh"
    list-id="zh-column-list"
    drawer-class="zh-column-setting-drawer"
    @confirm="handleColumnConfirm"
    @cancel="handleColumnCancel"
    @reset="handleColumnReset"
  />

  <!-- 英文标签页列设置 -->
  <zzColumnSetting
    v-model="showColumnSetting_en"
    :columns="tableColumns_en"
    :default-columns="defaultTableColumns_en"
    storage-key="internationalSetting_columns_en"
    list-id="en-column-list"
    drawer-class="en-column-setting-drawer"
    @confirm="handleColumnConfirm_en"
    @cancel="handleColumnCancel_en"
    @reset="handleColumnReset_en"
  />
</template>

<script setup>
import { computed, getCurrentInstance, onMounted, ref, nextTick } from "vue";
import add from "./components/add.vue";
import zzColumnSetting from "@/components/zzColumnSetting/index.vue";
import { useI18n } from "vue-i18n";
import { loadRemoteData } from "@/i18n";

const { t } = useI18n();

const { proxy } = getCurrentInstance();

// 动态计算表格高度
const tableStyle = computed(() => {
  // 当显示搜索头时，需要减去更多高度（搜索框的高度）
  // 假设搜索框高度约为58.8px，可以根据实际情况调整
  const baseHeight = showSearchHeader.value ? 118 : 59.2;
  return {
    height: `calc(100% - ${baseHeight}px)`,
  };
});

const showSearchHeader = ref(true);
const showColumnSetting = ref(false);
const showColumnSetting_en = ref(false);

// 默认列配置
const defaultTableColumns = ref([
  {
    field: "namespace",
    title: t("internationalSetting.namespace"),
    visible: true,
    fixed: null,
  },
  {
    field: "keyPath",
    title: t("internationalSetting.keyPath"),
    visible: true,
    fixed: null,
  },
  {
    field: "value",
    title: t("internationalSetting.value"),
    visible: true,
    fixed: null,
  },
  {
    field: "description",
    title: t("internationalSetting.description"),
    visible: true,
    fixed: null,
  },
  {
    field: "status",
    title: t("internationalSetting.status"),
    visible: true,
    fixed: null,
  },
]);

const defaultTableColumns_en = ref([
  {
    field: "namespace",
    title: t("internationalSetting.namespace"),
    visible: true,
    fixed: null,
  },
  {
    field: "keyPath",
    title: t("internationalSetting.keyPath"),
    visible: true,
    fixed: null,
  },
  {
    field: "value",
    title: t("internationalSetting.value"),
    visible: true,
    fixed: null,
  },
  {
    field: "description",
    title: t("internationalSetting.description"),
    visible: true,
    fixed: null,
  },
  {
    field: "status",
    title: t("internationalSetting.status"),
    visible: true,
    fixed: null,
  },
]);

// 用于强制表格重新渲染的标记
const tableKey = ref(0);
const STORAGE_KEY = proxy.$CONS.STORAGE_KEY;

// 中文标签页列设置事件处理
const handleColumnConfirm = (columns) => {
  // 使用深拷贝更新列设置，确保响应式更新
  tableColumns.value = JSON.parse(JSON.stringify(columns));

  // 从 localStorage 取出已有的配置对象
  const allSettings = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
  allSettings["internationalSetting_columns_zh"] = tableColumns.value;

  // 写回 localStorage
  localStorage.setItem(STORAGE_KEY, JSON.stringify(allSettings));
  // 增加tableKey强制表格重新渲染
  tableKey.value += 1;
};

const handleColumnCancel = () => {
  // 加载保存的列设置
  loadColumnSettings();
};

const handleColumnReset = (columns) => {
  // 使用深拷贝更新列设置，确保响应式更新
  tableColumns.value = JSON.parse(JSON.stringify(columns));

  // 从 localStorage 取出已有的配置对象
  const allSettings = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
  allSettings["internationalSetting_columns_zh"] = tableColumns.value;

  // 写回 localStorage
  localStorage.setItem(STORAGE_KEY, JSON.stringify(allSettings));

  // 增加tableKey强制表格重新渲染
  tableKey.value += 1;
};

// 英文标签页列设置事件处理
const handleColumnConfirm_en = (columns) => {
  // 使用深拷贝更新列设置，确保响应式更新
  tableColumns_en.value = JSON.parse(JSON.stringify(columns));

  // 从 localStorage 取出已有的配置对象
  const allSettings = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
  allSettings["internationalSetting_columns_en"] = tableColumns_en.value;

  // 写回 localStorage
  localStorage.setItem(STORAGE_KEY, JSON.stringify(allSettings));

  // 增加tableKey强制表格重新渲染
  tableKey.value += 1;
};

const handleColumnCancel_en = () => {
  // 加载保存的列设置
  loadColumnSettings();
};

const handleColumnReset_en = (columns) => {
  // 使用深拷贝更新列设置，确保响应式更新
  tableColumns_en.value = JSON.parse(JSON.stringify(columns));

  // 从 localStorage 取出已有的配置对象
  const allSettings = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
  allSettings["internationalSetting_columns_en"] = tableColumns_en.value;

  // 写回 localStorage
  localStorage.setItem(STORAGE_KEY, JSON.stringify(allSettings));

  // 增加tableKey强制表格重新渲染
  tableKey.value += 1;
};

// 中文标签页表格列配置
const tableColumns = ref([
  {
    field: "namespace",
    title: t("internationalSetting.namespace"),
    visible: true,
    fixed: null, // null: 不固定, 'left': 左固定, 'right': 右固定
  },
  {
    field: "keyPath",
    title: t("internationalSetting.keyPath"),
    visible: true,
    fixed: null,
  },
  {
    field: "value",
    title: t("internationalSetting.value"),
    visible: true,
    fixed: null,
  },
  {
    field: "description",
    title: t("internationalSetting.description"),
    visible: true,
    fixed: null,
  },
  {
    field: "status",
    title: t("internationalSetting.status"),
    visible: true,
    fixed: null,
  },
]);

// 英文标签页表格列配置（使用英文标题）
const tableColumns_en = ref([
  {
    field: "namespace",
    title: t("internationalSetting.namespace"),
    visible: true,
    fixed: null, // null: 不固定, 'left': 左固定, 'right': 右固定
  },
  {
    field: "keyPath",
    title: t("internationalSetting.keyPath"),
    visible: true,
    fixed: null,
  },
  {
    field: "value",
    title: t("internationalSetting.value"),
    visible: true,
    fixed: null,
  },
  {
    field: "description",
    title: t("internationalSetting.description"),
    visible: true,
    fixed: null,
  },
  {
    field: "status",
    title: t("internationalSetting.status"),
    visible: true,
    fixed: null,
  },
]);

// 查询model
const searchModel = ref({
  namespace: "",
  keyPath: "",
  value: "",
  status: "1",
});

const searchOptions = computed(() => {
  return {
    // 接收字段
    model: searchModel,
    // 配置表单
    column: [
      {
        label: t("internationalSetting.namespace"),
        type: "inputText",
        field: "namespace",
      },
      {
        label: t("internationalSetting.keyPath"),
        type: "inputText",
        field: "keyPath",
      },
      {
        label: t("internationalSetting.value"),
        type: "inputText",
        field: "value",
      },
      {
        label: t("internationalSetting.status"),
        type: "switchSelect",
        field: "status",
        activeValue: "1",
        inactiveValue: "0",
      },
    ],
  };
});

const searchModel_b = ref({
  namespace: "",
  keyPath: "",
  value: "",
  status: "1",
});

const searchOptions_b = computed(() => {
  return {
    // 接收字段
    model: searchModel_b,
    // 配置表单
    column: [
      {
        label: t("internationalSetting.namespace"),
        type: "inputText",
        field: "namespace",
      },
      {
        label: t("internationalSetting.keyPath"),
        type: "inputText",
        field: "keyPath",
      },
      {
        label: t("internationalSetting.value"),
        type: "inputText",
        field: "value",
      },
      {
        label: t("internationalSetting.status"),
        type: "switchSelect",
        field: "status",
        activeValue: "1",
        inactiveValue: "0",
      },
    ],
  };
});

const getSearchData = (val) => {
  searchModel.value = val;
  query("search");
};

const getSearchData_b = (val) => {
  searchModel_b.value = val;
  query("search");
};

const resetFields = () => {
  searchModel.value = {
    namespace: "",
    keyPath: "",
    value: "",
    status: "1",
  };
};

const resetFields_b = () => {
  searchModel_b.value = {
    namespace: "",
    keyPath: "",
    value: "",
    status: "1",
  };
};

const tableData = ref([]);

// 添加编辑状态变量
const editingRow = ref(null); // 当前正在编辑的行
const editingRowData = ref(null); // 编辑中的行数据

const tablePage = ref({ pageNum: 1, pageSize: 15, total: 0 });

// 从本地存储加载列设置
const loadColumnSettings = () => {
  try {
    // 加载中文标签页列设置
    const savedColumns_zh = JSON.parse(localStorage.getItem(STORAGE_KEY))[
      "internationalSetting_columns_zh"
    ];
    if (savedColumns_zh) {
      const parsedColumns = savedColumns_zh;
      // 确保所有必要的列都存在
      const requiredFields = [
        "namespace",
        "keyPath",
        "value",
        "description",
        "status",
      ];
      const allFieldsExist = requiredFields.every((field) =>
        parsedColumns.some((col) => col.field === field)
      );

      if (allFieldsExist) {
        // 更新标题为当前语言环境对应的文本
        parsedColumns.forEach((col) => {
          switch (col.field) {
            case "namespace":
              col.title = t("internationalSetting.namespace");
              break;
            case "keyPath":
              col.title = t("internationalSetting.keyPath");
              break;
            case "value":
              col.title = t("internationalSetting.value");
              break;
            case "description":
              col.title = t("internationalSetting.description");
              break;
            case "status":
              col.title = t("internationalSetting.status");
              break;
          }
        });
        tableColumns.value = parsedColumns;
      } else {
        console.warn("加载的中文标签页列设置不完整，使用默认设置");
      }
    }

    // 加载英文标签页列设置
    const savedColumns_en = JSON.parse(localStorage.getItem(STORAGE_KEY))[
      "internationalSetting_columns_en"
    ];
    if (savedColumns_en) {
      const parsedColumns = savedColumns_en;
      // 确保所有必要的列都存在
      const requiredFields = [
        "namespace",
        "keyPath",
        "value",
        "description",
        "status",
      ];
      const allFieldsExist = requiredFields.every((field) =>
        parsedColumns.some((col) => col.field === field)
      );

      if (allFieldsExist) {
        // 更新标题为当前语言环境对应的文本
        parsedColumns.forEach((col) => {
          switch (col.field) {
            case "namespace":
              col.title = t("internationalSetting.namespace");
              break;
            case "keyPath":
              col.title = t("internationalSetting.keyPath");
              break;
            case "value":
              col.title = t("internationalSetting.value");
              break;
            case "description":
              col.title = t("internationalSetting.description");
              break;
            case "status":
              col.title = t("internationalSetting.status");
              break;
          }
        });
        tableColumns_en.value = parsedColumns;
      } else {
        console.warn("加载的英文标签页列设置不完整，使用默认设置");
      }
    }

    // 增加tableKey强制表格重新渲染
    tableKey.value += 1;
  } catch (error) {
    console.error("加载列设置失败:", error);
  }
};

onMounted(() => {
  // 加载保存的列设置
  loadColumnSettings();
  // init()
  query("search");
});

const loading = ref(false);
const btnLoading = ref(false);

const query = async (mode) => {
  loading.value = true;
  if (mode === "search") {
    if (activeName.value === "zh-CN") {
      searchModel.value.queryParam = {
        pageNum: 1,
        pageSize: 15,
        total: 0,
      };
    } else {
      searchModel_b.value.queryParam = {
        pageNum: 1,
        pageSize: 15,
        total: 0,
      };
    }
  }

  let param = {};
  if (activeName.value === "zh-CN") {
    param = {
      ...searchModel.value,
      locale: activeName.value,
    };
  } else {
    param = {
      ...searchModel_b.value,
      locale: activeName.value,
    };
  }
  let res =
    await proxy.$API.internationalManagement.international.queryWithPage.post(
      param
    );
  if (res.code === "01") {
    tableData.value = res.bizList;
    tablePage.value.total = res.total;
    tablePage.value.pageSize = res.pageSize;
    loading.value = false;
  } else {
    loading.value = false;
  }
};

const tabelSize = ref("small");

// 处理表格大小变化
const handleSizeChange = (size) => {
  tabelSize.value = size;
};

const handlePageChange = (page) => {
  if (activeName.value === "zh-CN") {
    searchModel.value.queryParam = {
      pageNum: page.currentPage,
      pageSize: page.pageSize,
    };
  } else {
    searchModel_b.value.queryParam = {
      pageNum: page.currentPage,
      pageSize: page.pageSize,
    };
  }

  query();
};

const activeName = ref("zh-CN");

const handleClick = async () => {
  await nextTick();
  // 重新加载列设置以更新标题语言
  loadColumnSettings();
  query("search");

  singleMode.value = false;
};

const addRef = ref();
const addIsOpen = ref(false);

// 新增
const addDict = () => {
  // 打开新增弹窗，将当前语言环境作为参数传入子组件
  addIsOpen.value = true;
  addRef.value.locale = activeName.value;
};

const handleSuccess = () => {
  query("search");
  syncCache();
};

// 同步缓存
const syncCache = async () => {
  await loadRemoteData(activeName.value);
};

// 编辑
const setDict = async (row) => {
  // 保存原始行数据的副本
  editingRowData.value = JSON.parse(JSON.stringify(row));
  // 设置当前编辑行
  editingRow.value = row;
};

// 确认编辑
const confirmEdit = async () => {
  // 打印修改后的行数据
  let res = await proxy.$API.internationalManagement.international.modify.post(
    editingRow.value
  );
  if (res.code === "01") {
    query("search");
    syncCache();
  }
  // 这里可以添加保存数据的API调用
  // 重置编辑状态
  editingRow.value = null;
  editingRowData.value = null;
};

// 取消编辑
const cancelEdit = () => {
  // 如果有编辑中的数据，恢复原始数据
  if (editingRowData.value) {
    // 找到当前编辑的行在tableData中的索引
    const index = tableData.value.findIndex(
      (item) => item === editingRow.value
    );
    if (index !== -1) {
      // 恢复原始数据
      Object.assign(tableData.value[index], editingRowData.value);
    }
  }
  // 重置编辑状态
  editingRow.value = null;
  editingRowData.value = null;
};

// 删除
const deleteDict = async (row) => {
  let res = await proxy.$API.internationalManagement.international.delete.get(
    row.id
  );
  if (res.code === "01") {
    query("search");
    syncCache();
  }
};

const singleMode = ref(false);

// 快速添加另一种语言版本
const quickAddOtherLanguage = (row) => {
  // 切换到另一个标签页
  const targetLocale = activeName.value === "zh-CN" ? "en-US" : "zh-CN";
  activeName.value = targetLocale;

  // addIsOpen.value = true;
  // addRef.value.locale = activeName.value;

  // 等待DOM更新后打开添加弹窗并自动填充数据
  nextTick(() => {
    // 打开添加弹窗
    addIsOpen.value = true;

    // 等待弹窗组件加载完成
    nextTick(() => {
      if (addRef.value) {
        // 设置当前语言环境
        addRef.value.locale = targetLocale;
        singleMode.value = true;

        // 重置表单数据结构，确保只有一个命名空间和一个键值对
        if (addRef.value.formData) {
          // 直接修改formData对象
          addRef.value.formData.locale = targetLocale;
          addRef.value.formData.namespaces = [
            {
              name: row.namespace,
              keyValues: [
                {
                  key: row.keyPath,
                  value: "", // 值留空，由用户填写
                  description: "",
                },
              ],
            },
          ];
        }
      }
    });

    // 刷新表格数据
    query("search");
  });
};
</script>

<style lang="less" scoped>
:deep(.el-tabs__header) {
  margin: 0 0 0px;
}
</style>
